<template>
	<view class="paers-max">
		<!-- 头部导航栏 -->
		<view class="paers-Navbar">
			<Navbar :leftIconColor="'#0000000'" :bgColor="'#0000000'" />
		</view>
		<!-- 背景 :style="{backgroundImage: 'url('+imageUrl + '/vrTravel/blueSky.png'+')'}"-->
		<view class="paers-background">
			<image :src="imageUrl + '/vrTravel/blueSky.png'" mode="widthFix" style="width:100%;height:100%;"></image>
		</view>
		<!--地图 -->
		<view>
			<!-- 112.79028  28.45748 3OEBZ-NP4RQ-HUO52-B4FEN-CNPOZ-GLBYF-->
			<map style="width:100%;height:100vh;" id="map" subkey="3MOBZ-MUH6V-ELXPK-5BDMI-YXEKT-4IBBX" longitude="112.821728"
				latitude="28.467443" scale="7" layer-style="1" :markers="covers" @markertap="onMarkerTap"></map>
		</view>
	</view>
</template>
<script>
	import {
			scenicIndex
		} from "@/api/vote/vote.js"
	export default {
		data() {
			return {
				imageUrl: this.$imageUrl,
				listArr: [],
				covers: [],
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				iconPath: '', //标点的图标
				// width: 0, //宽高必填  不填报错
				// height: 0,
			};
		},
		onLoad() {
			this.getScenicList()
		},
		methods: {
			async getScenicList() {
							try {
								let res = await scenicIndex();
								this.covers = res.data || {};
								this.getList(); // 确保在设置 this.covers 之后调用
							} catch (error) {
								console.error(error);
							}
						},
			getList() {
							let listArr = []
							this.covers.map(item => {
								const obj = {
									id: item.scenicId,
									width: 85.85,
									height: 90,
									//将经纬度进行重新赋值，不覆盖将默认latitude: 39.909,longitude: 116.39742,时地图移动到标点位置
									latitude: this.latitude = item.latitude,
									longitude: this.longitude = item.longitude,
									iconPath: item.logoUrl, //给每一个坐标添加图片
									vrUrl: item.vrUrl //根据VR路径判断是否跳转vr页面
								}
								listArr.push(obj)
							})
							this.covers = listArr
						},
			onMarkerTap(e) {
							// 处理点击事件，如弹窗展示信息等
							// 点击事件中处理页面跳转
							const cover = this.covers.find(covers => covers.id === e.markerId)
							if (cover.vrUrl !== null && cover.vrUrl !== "") {
								this.$Router.push({
									name: 'vrBrowsing',
									params: {
										orderId: cover.vrUrl,
									}
								})
							} else {
								this.$Router.push({
									name: 'scenicDetails',
									params: {
										orderId: cover.id,
									}
								})
							}
						}
		}
	}
</script>
<style>
	.u-navbar__content {
		background-color: rgba(255, 255, 255, 0) !important;
	}
</style>
<style lang="scss">
	.paers-max {
		min-width: 100vw;
		height: 100vh;
	}

	.paers-Navbar {
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 9999999;

	}

	.paers-background {
		width: 100%;
		height: 330rpx;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9999;
	}
</style>